<template>
	<view class="wp1">
		<view class="wp-up">
			<!-- 轮播 -->
			<view class="wrap">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item>
									<view class="swiper-item uni-bg-red">
										<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
									</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item uni-bg-green">
										<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
									</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item uni-bg-blue">
										<image src="https://cdn.uviewui.com/uview/swiper/3.jpg" mode=""></image>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<!-- 导航 -->
			<view class="up-dh">
				<view class="zhinan" @click="canzhan">
					<image src="./img/zhinan.jpg" mode=""></image>
					<text>参展指南</text>
				</view>
				<view class="guanzhan" @click="guanzhan">
					<image src="./img/guanzhan.jpg" mode=""></image>
					<text>观展指南</text>
				</view>
				<view class="huodong" @click="richeng">
					<image src="./img/richeng.jpg" mode=""></image>
					<text>活动日程</text>
				</view>
				<view class="guanyu" @click="gynb">
					<image src="./img/guanyu.jpg" mode=""></image>
					<text>关于南博</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'top',
		data(){
			return{
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods: {
		  canzhan(){
		  	uni.navigateTo({
		  		url:'../user/canzhanzhinan'
		  	})
		  },
		  guanzhan(){
		  	uni.navigateTo({
		  		url:'../user/guanzhanzhinan'
		  	})
		  },
		  richeng(){
		  	uni.navigateTo({
		  		url:'../user/richeng'
		  	})
		  }	,
		  gynb(){
		  	uni.navigateTo({
		  		url:'../user/gynb'
		  	})
		  }	
		}
	}
</script>

<style lang="scss" scoped>
	/* 背景 */
	.wp1{
		background: #fafafa;
		width: 100%;
		height: 680rpx;
	}
	.wp-up{
		background: url(./img/bg.jpg) no-repeat 0 0;
		background-size:100% 100%;
		width: 100%;
		height: 570rpx;
	}
	/* 轮播 */
	.wrap{
		height: 390rpx;
	}
	.wrap .uni-padding-wrap,.page-section,.page-section-spacing,.swiper{
		height: 390rpx;
	}
	.swiper image{
		width: 100%;
		height: 390rpx;
	}
	/* 导航 */
	.up-dh{
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		justify-content: space-around;
		background: #fff;
		height: 225rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
	.up-dh text{
		display: block;
		margin-left: -10rpx;
	}
	.up-dh view{
		margin-top: 35rpx;
	}
	.up-dh view image{ 
		width: 90rpx;
		height: 125rpx;
	}
</style>
